<template>
    <div>
        <div class="e-table billList" style="background-color: #fff">
             <opstep :stepInfo="stepsArr"></opstep>
            <!-- 头部buttons -->
            <div class="top">
                <div class="left">
                    <div >
                        <el-button size="small" class="btn-greenYellow" @click="goAdd"
                        >新增</el-button>
                    </div>
                </div>
                <div class="search_box">
                    <el-input class="ipt" type="text"
                        placeholder="输入搜索关键字"
                        v-model="searchKey"
                        @select="onSearch"
                        @change="onSearch"
                    ><img src="@/assets/search.png" slot="suffix" @click="onSearch" /></el-input>
                    <div class="adverse">
                        <el-button type="primary" @click="onAdvanceSearch">高级搜索</el-button>
                    </div>
                </div>
            </div>
            <el-table
                ref="table"
                :data="tableData"
                border
                style="width: 100%"
                class="table"
                highlight-current-row
                height="0"
                v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'table' }"
            >
                <el-table-column label="结算编号" fixed width="250" class-name="blue-column">
                    <template slot-scope="{ row }" >
                        <span @click="tableDbShow(row)">{{row.billNo}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="settleDate" label="结算日期" min-width="200">
                     <!-- <template slot-scope="{ row }" >
                        <span>{{row.settleDate !== ''?row.settleDate.split(' '):''}}</span>
                    </template> -->
                </el-table-column>
                <el-table-column prop="orgName" label="机构" min-width="150">
                </el-table-column>
                <el-table-column prop="settleOrgName" label="结算单位" min-width="150">
                </el-table-column>
                <el-table-column prop="settleAmount" label="结算金额(元)" min-width="200">
                </el-table-column>
                <el-table-column prop="totalSettleAmount" label="累计结算金额(元)" width="130">
                </el-table-column>
                <el-table-column prop="sourceNo" label="源单编号" width="130">
                    <template v-slot="{ row }">
                    <span
                        style="color: blue; cursor: pointer"
                        @click="seeSourceOrder(row)"
                        >{{ row.sourceNo }}</span
                    >
                </template>
                </el-table-column>
                <el-table-column prop="state" label="状态" width="130">
                    <template slot-scope="{ row,$index }">
                        <ToolHistory v-if="row.state == 1" :key="$index" url="/turnoversettle/audit/getAuditHistory" :billId="row.billId" :billType="6097">
                            <span v-status="row.state">
                               {{state.find(x=>x.value == row.state).label}}
                            </span>
                        </ToolHistory>
                        <span v-else v-status="row.state">
                          {{state.find(x=>x.value == row.state).label}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="红单状态" width="100" prop="redState">
                <template slot-scope="{ row }" >
                        <span
                        @click="goToRed(row)"
                        style="color: blue; cursor: pointer"
                        >{{row.redState}}
                        </span>
                </template>
                </el-table-column>
            </el-table>
            <ComPagination
                :total="total"
                :pageSize.sync="pagination.limit"
                :currentPage.sync="pagination.page"
                @currentChange="getTableData"
                @sizeChange="getTableData"
                class="bottomSetting"
            />
         </div>
    </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import { vueDom, advanceSearch, selectDataClient, openAppClient } from '@/utils/common.js'
import ComPagination from '@/components/pagination/pagination'
import { mapState } from 'vuex'
// import { getMainList } from '@/api/settlementManagement/gongchengjieshuan/baozhengjin.js'
import auditRequest from '@/api/settlementManagement/peripheralMaterial/peripheralMaterial.js'
// import { getCurrentState } from '@/api/settlementManagement/gongchengjieshuan/jiakoukuan.js'
import opstep from '@/components/topstep/topstep.vue'
export default {
    computed: {
        ...mapState(['searchData']),
        ...mapState({
            state: state => state.equip.equipData.state, //通用流程状态
        })
    },
    data () {
        return {
            detailsOfProposedArr: [],
            stepsArr: [{ description: '①周材调拔' }, { description: '②周材入库' }, { description: '③周材验收' }, { description: '④调拔结算' }],
            tableData: [],
            addList: [], // 缓存新增数据
            unitList: [],
            searchKey: '',
            isSearch: false,
            addFlag: true,
            materialListTeam: [], //存储执行队列
            materialListIndex: 0,
            tableHeight: 0,
            pagination: {
                'beginDate': '',
                'contractName': '',
                'endDate': '',
                'keyWord': '',
                'limit': 20,
                'orgId': '',
                'outsourcerName': '',
                'page': 1,
                'sendEasStates': [],
                'states': []
            },
            total: 0
        }
    },
    components: {
        ComPagination,
        opstep
    },
    mounted () {
        this.getTableData()
        // table动态高度
        vueDom(
            () => {
                this.tableHeight = document.body.clientHeight - 230
            },
            () => {
                return $('table').length !== 0
            }
        )
        this.fn = () => {
            this.tableHeight = document.body.clientHeight - 230
        }
    },
    methods: {
        getTableData () {
            auditRequest.getpaymentList(this.pagination).then(res=>{
                const data =  res.list ? res.list : []
                //红单状态
                const redState = {
                    '-1': '',
                    '0': '冲销中',
                    '1': '冲销中',
                    '2': '已冲',
                    '3': '红单'
                }
                data.forEach(item => {
                    item.isRed = item.redState
                    item.redState = redState[item.redState]
                })
                this.tableData = res.list ? res.list : []
                this.total = res.totalCount
            })
        },
        goAdd () {
            // console.log(this.state, '333')
            this.$router.push('/peripheralMaterialAdd')
        },
        //双击单元格去查看页面
        tableDbShow (row) {
            const billid = row.billId
            const auditParams = {
                'billId': billid,
                'billType': 6097
            }
            //判断是否为红单3为红单
            if(row.isRed == 3) {
                this.$router.push({
                    path: '/peripheralMaterialRed',
                    query: { billid: row.billId }
                })
                return
            }
            if(row.state === -1 || row.state === 2 || row.state === 5) {
                this.$router.push({
                    path: '/peripheralMaterialView',
                    query: { billid: row.billId }
                })
            }else{
                auditRequest.getanniu(auditParams).then(res => {
                    if(res.canModify) {
                        this.$router.push({
                            path: '/peripheralMaterialEdit',
                            query: { billid: row.billId }
                        })
                    }else{
                        this.$router.push({
                            path: '/peripheralMaterialView',
                            query: { billid: row.billId }
                        })
                    }
                })
            }
        },
        async onSearch () {
            this.pagination.page = 1
            this.pagination.keyWord = this.searchKey
            this.tableData = []
            this.getTableData()
        },
        onAdvanceSearch () {
            advanceSearch('/peripheralMaterialSearch')
                .then(res => {
                    this.query.keyWord = ''
                    this.query.limit = 20
                    this.query.page = 1
                    this.query.search = res
                    this.getData()
                })
        },
        //点击红单
        goToRed (row) {
            //判断是否为红单
            //relationId为对应的关联id
            if(row.isRed == 3) {
                this.$router.push({
                    path: '/peripheralMaterialView',
                    query: { billid: row.relationId }
                })
                return
            }else {
                this.$router.push({
                    path: '/peripheralMaterialRed',
                    query: { billid: row.relationId }
                })
                return
            }
        },
        //查看源单页面
        seeSourceOrder (row) {
            openAppClient(
            `/revolveAllocationShow?billid=${row.sourceId}&isview=true`, '查看周材调拨单'
            )
        },
    }
}
</script>
